import { useState, useRef } from "react";
import { Image, Button } from "antd";
import { PageContainer } from "@ant-design/pro-layout";
import useCommonTable from "@/hooks/useCommonTable";
import { fetchList, updateStatus, remove } from "@/api/per";
import { PlusOutlined } from "@ant-design/icons";
import { history } from "umi";
import { disableStatusOptions } from "@/const";
import useUpdateStatus from "@/hooks/useUpdateStatus";

export default () => {
  const actionRef = useRef();
  const [tabActiveKey, setTabActiveKey] = useState(() => {
    return window.location.hash.split("#").slice(-1)?.[0] || "1";
  });
  const columns = [
    {
      title: "ID",
      dataIndex: "id",
      width: 150,
      search: false,
    },
    {
      title: "主图",
      dataIndex: "picture",
      width: 150,
      search: false,

      render: (_, record) => {
        return <Image width={100} height={100} src={record.picture} />;
      },
    },
    {
      title: "商品名称",
      dataIndex: "name",
      width: 150,
    },
    {
      title: "售价",
      width: 150,
      search: false,
      render: (_, record) => {
        return record?.specificationVOS?.map((item) => {
          return <div>{item.price}</div>;
        });
      },
    },
    {
      title: "VIP价格",
      width: 150,
      search: false,
      render: (_, record) => {
        return record?.specificationVOS?.map((item) => {
          return <div>{item.vipPrice}</div>;
        });
      },
    },
    {
      title: "库存",
      width: 150,
      search: false,
      render: (_, record) => {
        return record?.specificationVOS?.map((item) => {
          return <div>{item.inventory}</div>;
        });
      },
    },
    {
      title: "是否上架",
      dataIndex: "onTheShelf",
      valueType: "select",
      width: 150,
      fieldProps: {
        options: disableStatusOptions,
      },
      search: false,
      render: (_, record) => {
        return useUpdateStatus(
          updateStatus,
          record,
          actionRef,
          null,
          false,
          "onTheShelf"
        );
      },
    },
  ];

  return (
    <PageContainer
      tabActiveKey={tabActiveKey}
      onTabChange={(key) => {
        setTabActiveKey(key);
        window.location.hash = `#${key}`;
        actionRef.current?.reload();
      }}
      tabList={[
        {
          key: "1",
          tab: "出售中",
        },
        {
          key: "0",
          tab: "仓库",
        },
      ]}
    >
      {useCommonTable({
        actionRef,
        title: "周边商品",
        columns,
        modalWidth: 700,
        fetchList,
        remove: tabActiveKey == 0 ? remove : null,
        params: {
          onTheShelf: tabActiveKey,
        },
        onlyColumns: tabActiveKey == 1,
        renderEdit: (record) => {
          return (
            <Button
              key="add"
              type="primary"
              onClick={() => {
                history.push(`/per/index/edit?id=${record.id}`);
              }}
            >
              编辑
            </Button>
          );
        },
        renderAdd: () => {
          return tabActiveKey == 1 ? null : (
            <Button
              key="add"
              icon={<PlusOutlined />}
              type="primary"
              onClick={() => {
                history.push(`/per/index/edit`);
              }}
            >
              新增
            </Button>
          );
        },
        layout: "horizontal",
        actionColumnWidth: 200,
        showCheckbox: false,
      })}
    </PageContainer>
  );
};
